/*
 * @Author: YYJ
 * @Date: 2024-05-07 16:05:56
 * @Description: 
 * @FilePath: \lgd-admin\src\pages\person\account\index.tsx
 */
import { PlusOutlined, EditOutlined, AccountBookOutlined, CreditCardOutlined, TransactionOutlined, ShoppingOutlined, PayCircleOutlined, CheckCircleOutlined, DollarOutlined, UserDeleteOutlined, WalletTwoTone, GiftTwoTone, ProfileTwoTone } from '@ant-design/icons';
import TabPane from 'antd/es/tabs/TabPane';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { Button, Divider, Statistic, Table, Tabs, message } from 'antd';
import { useRef,useState } from 'react';

import { queryList, add, update, PersonAccountItem, AccountOpItem } from '@/services/person/account';
import DetailList from './detailList';
import FinanceForm from './financeForm';
import FinanceOpForm from './financeOpForm';
import CreditForm from './creditForm';
import CreditOpForm from './creditOpForm';
import LoanForm from './loanForm';
import LoanOpForm from './loanOpForm';
import ClaimForm from './claimForm';
import ClaimOpForm from './claimOpForm';
import DebtFrom from './debtForm';
import DebtOpForm from './debtOpForm';

export default () => {
  const actionRef = useRef<ActionType>();
  const [tableKey, setTableKey] = useState<string>("credit");

  const [detailVisible, setDetailVisible] = useState<boolean>(false);
  const [financeVisible, setFinanceVisible] = useState<boolean>(false);
  const [financeOpVisible, setFinanceOpVisible] = useState<boolean>(false);
  const [claimVisible, setClaimVisible] = useState<boolean>(false);
  const [claimOpVisible, setClaimOpVisible] = useState<boolean>(false);
  const [creditVisible, setCreditVisible] = useState<boolean>(false);
  const [creditOpVisible, setCreditOpVisible] = useState<boolean>(false);
  const [loanVisible, setLoanVisible] = useState<boolean>(false);
  const [loanOpVisible, setLoanOpVisible] = useState<boolean>(false);
  const [debtVisible, setDebtVisible] = useState<boolean>(false);
  const [debtOpVisible, setDebtOpVisible] = useState<boolean>(false);

  const [personAccountItem] = useState<Partial<PersonAccountItem> | undefined>();
  const [accountId, setAccounId] = useState<Partial<Number> | undefined>();
  const [accountOpItem, setAccountOpItem] = useState<Partial<AccountOpItem> | undefined>();

  // 添加账户
  const handleSubmit = async (fields: PersonAccountItem) => {
    setDetailVisible(false);
    setFinanceVisible(false);
    setFinanceOpVisible(false);
    setClaimVisible(false);
    setClaimOpVisible(false);
    setCreditVisible(false);
    setCreditOpVisible(false);
    setLoanVisible(false);
    setLoanOpVisible(false);
    setDebtVisible(false);
    setDebtOpVisible(false);
    
    const msg = fields.id ? '更新' : '添加';
    message.loading('正在' + msg + '账户');
    try {
        await add({ ...fields });
        message.success(msg + '账户成功');
    } catch (error) {
        message.error(msg + '账户失败，请重试！');
    }

    setTableKey(fields.accountType);
    if (actionRef.current) {
        actionRef.current.reload();
    }
  };

  /**
   * 查看明细
   * @param item 
   */
  const showDetailForm = (accountId : number) => {
    setDetailVisible(true);
    setAccounId(accountId);
  };

  // 操作账户
  const handleOpSubmit = async (fields: AccountOpItem) => {
    setDetailVisible(false);
    setFinanceVisible(false);
    setFinanceOpVisible(false);
    setClaimVisible(false);
    setClaimOpVisible(false);
    setCreditVisible(false);
    setCreditOpVisible(false);
    setLoanVisible(false);
    setLoanOpVisible(false);
    setDebtVisible(false);
    setDebtOpVisible(false);
    
    message.loading('正在更新账户');
    try {
        await update({ ...fields });
        message.success('更新账户成功');
    } catch (error) {
        message.error('更新账户失败，请重试！');
    }

    setTableKey(fields.accountType);
    if (actionRef.current) {
        actionRef.current.reload();
    }
  };

  const financeColumns: ProColumns<PersonAccountItem>[] = [
      {
        title: '账户名称',
        dataIndex: 'accountName',
      },
      {
        title: '流入金额',
        dataIndex: 'inAmount',
        valueType: 'money',
      },
      {
        title: '流出金额',
        dataIndex: 'outAmount',
        valueType: 'money',
      },
      {
        title: '余额',
        dataIndex: 'balance',
        valueType: 'money',
      },
      {
        title: '备注',
        dataIndex: 'remark',
      },
      {
        title: '操作',
        width: 120,
        dataIndex: 'option',
        valueType: 'option',
        render: (_, record) => (
          <>
            <a
              key="transIn"
              onClick={() => {
                showOpFinanceForm({ ...record, opType: 'transIn' });
              }}
              title="收入"
            ><WalletTwoTone /></a>
            <Divider key="vertical_transOut" type="vertical" />
            <a
              key="transOut"
              onClick={() => {
                showOpFinanceForm({ ...record, opType: 'transOut' });
              }}
              title="支出"
            ><GiftTwoTone /></a>
            <Divider key="vertical_detail" type="vertical" />
            <a
              key="detail"
              onClick={() => {
                showDetailForm(record.id);
              }}
              title="收支明细"
            ><ProfileTwoTone /></a>
          </>
        ),
      },
  ];

  const showFinanceForm = () => {
    setFinanceVisible(true);
  };

  const showOpFinanceForm = (item: AccountOpItem | undefined) => {
    setFinanceOpVisible(true);
    setAccountOpItem(item);
  };

  const claimColumns: ProColumns<PersonAccountItem>[] = [
      {
        title: '借款人',
        dataIndex: 'accountName',
      },
      {
        title: '借出金额',
        dataIndex: 'inAmount',
        valueType: 'money',
      },
      {
        title: '已还金额',
        dataIndex: 'outAmount',
        valueType: 'money',
      },
      {
        title: '应还余额',
        dataIndex: 'balance',
        valueType: 'money',
      },
      {
        title: '备注',
        dataIndex: 'remark',
      },
      {
        title: '操作',
        width:120,
        dataIndex: 'option',
        valueType: 'option',
        render: (_, record) => (
          <>
          <a
              key="lendTo"
              onClick={() => {
                showClaimOpForm({ ...record, opType: 'lendTo' });
              }}
              title="借出"
            ><WalletTwoTone /></a>
            <Divider key="lend_to" type="vertical" />
            <a
              key="lendBack"
              onClick={() => {
                showClaimOpForm({ ...record, opType: 'lendBack' });
              }}
              title="还款"
            ><TransactionOutlined /></a>
            <Divider key="claim_detail" type="vertical" />
            <a
              key="detail"
              onClick={() => {
                showDetailForm(record.id);
              }}
              title="收支明细"
            ><ProfileTwoTone /></a>
          </>
        ),
      },
  ];
  
  const showClaimForm = (item: PersonAccountItem | undefined) => {
    setClaimVisible(true);
  };

  const showClaimOpForm = (item: AccountOpItem | undefined) => {
    setClaimOpVisible(true);
    setAccountOpItem(item);
  };

  const creditColumns: ProColumns<PersonAccountItem>[] = [
      {
        title: '账户名称',
        dataIndex: 'accountName',
      },
      {
        title: '信用额度',
        dataIndex: 'inAmount',
        valueType: 'money',
      },
      {
        title: '可用金额',
        dataIndex: 'outAmount',
        valueType: 'money',
      },
      {
        title: '已用金额',
        dataIndex: 'balance',
        valueType: 'money',
      },
      {
        title: '账单金额',
        dataIndex: 'billAmount',
        valueType: 'money',
      },
      {
        title: '账单日',
        dataIndex: 'creditDay',
        renderText: (val: number) => `${val}日`,
      },
      {
        title: '还款日',
        dataIndex: 'dueDay',
        render: (_, record) => (
          <div
            title={`${ '离还款日还剩下：' + record.sortNum + '天'}`}
          >
            {record.dueDay}日
          </div>
        ),
      },
      {
        title: '宽限天数',
        dataIndex: 'graceDays',
        renderText: (val: number) => `${val}天`,
      },
      {
        title: '备注',
        dataIndex: 'remark',
      },
      {
        title: '操作',
        width: 140,
        dataIndex: 'option',
        valueType: 'option',
        render: (_, record) => (
          <>
            <a key="consume"
              onClick={() => {
                  showCreditOpForm({ ...record, opType: 'consume' });
              }}
              title="消费"
            ><ShoppingOutlined /></a>
            <Divider key="credit_refund" type="vertical" />
            <a key="refund"
              onClick={() => {
                  showCreditOpForm({ ...record, opType: 'refund' });
              }}
              title="还款"
            ><TransactionOutlined /></a>
            <Divider key="credit_check" type="vertical" />
            <a key="edit"
              onClick={() => {
                  showCreditOpForm({ ...record, opType: 'check' });
              }}
              title="对账"
            ><CheckCircleOutlined /></a>
            <Divider key="credit_detail" type="vertical" />
            <a
              key="detail"
              onClick={() => {
                showDetailForm(record.id);
              }}
              title="收支明细"
            ><ProfileTwoTone /></a>
          </>
        ),
      },
  ];

  const showCreditForm= () => {
      setCreditVisible(true);
  };

  const showCreditOpForm = (item: AccountOpItem | undefined) => {
      setCreditOpVisible(true);
      setAccountOpItem(item);
  };

  const loanColumns: ProColumns<PersonAccountItem>[] = [
      {
        title: '账户名称',
        dataIndex: 'accountName',
      },
      {
        title: '授信额度',
        dataIndex: 'inAmount',
        valueType: 'money',
      },
      {
        title: '可贷金额',
        dataIndex: 'outAmount',
        valueType: 'money',
      },
      {
        title: '已贷金额',
        dataIndex: 'balance',
        valueType: 'money',
      },
      {
        title: '账单金额',
        dataIndex: 'billAmount',
        valueType: 'money',
      },
      {
        title: '还款日',
        dataIndex: 'dueDay',
        render: (_, record) => (
          <div
            title={`${ '离还款日还剩下：' + record.sortNum + '天'}`}
          >
            {record.dueDay}日
          </div>
        ),
      },
      {
        title: '备注',
        dataIndex: 'remark',
      },
      {
        title: '操作',
        width: 120,
        dataIndex: 'option',
        valueType: 'option',
        render: (_, record) => (
          <>
            <a key="lend"
              onClick={() => {
                  showLoanOpForm({ ...record, opType: 'loanIn' });
              }}
              title="贷入"
            ><ShoppingOutlined /></a>
              <Divider key="lend_refund" type="vertical" />
            <a key="loanBack"
              onClick={() => {
                  showLoanOpForm({ ...record, opType: 'loanBack' });
              }}
              title="还款"
            ><TransactionOutlined /></a>
            <Divider key="lend_detail" type="vertical" />
            <a
              key="detail"
              onClick={() => {
                showDetailForm(record.id);
              }}
              title="收支明细"
            ><ProfileTwoTone /></a>
          </>
        ),
      },
  ];

  const showLoanForm= () => {
      setLoanVisible(true);
  };

  const showLoanOpForm = (item: AccountOpItem | undefined) => {
      setLoanOpVisible(true);
      setAccountOpItem(item);
  };

  const debtColumns: ProColumns<PersonAccountItem>[] = [
    {
      title: '出借人',
      dataIndex: 'accountName',
    },
    {
      title: '借入金额',
      dataIndex: 'inAmount',
      valueType: 'money',
    },
    {
      title: '已还金额',
      dataIndex: 'outAmount',
      valueType: 'money',
    },
    {
      title: '应还金额',
      dataIndex: 'balance',
      valueType: 'money',
    },
    {
      title: '备注',
      dataIndex: 'remark',
    },
    {
      title: '操作',
      width: 120,
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <>
          <a key="lend"
            onClick={() => {
              showLoanOpForm({ ...record, opType: 'borrowIn' });
            }}
            title="借入"
          ><ShoppingOutlined /></a>
            <Divider key="debt_refund" type="vertical" />
          <a key="refund"
            onClick={() => {
              showClaimOpForm({ ...record, opType: 'borrowBack' });
            }}
            title="还款"
          ><TransactionOutlined /></a>
          <Divider key="debt_detail" type="vertical" />
            <a
              key="detail"
              onClick={() => {
                showDetailForm(record.id);
              }}
              title="收支明细"
            ><ProfileTwoTone /></a>
        </>
      ),
    },
  ];

  const showDebtForm = () => {
    setDebtVisible(true);
  };

  const showDebtOpForm = (item: AccountOpItem | undefined) => {
    setDebtOpVisible(true);
    setAccountOpItem(item);
  };


  return (
    <PageContainer title={false}>
      <Tabs type="card" 
          defaultActiveKey={tableKey} 
          size="large" 
          tabPosition="left"
          style={{marginBottom : 0}}>
          <TabPane tab={<span><AccountBookOutlined />  金融</span>}
              key="finance"
              style={{ paddingLeft: 0 }}>
              <ProTable<PersonAccountItem>
                actionRef={actionRef}
                rowKey="id"
                search={false}
                request={(params) => queryList({ ...params, accountType: 'finance' })}
                columns={financeColumns}
                toolBarRender={() => [
                  <Button type="primary" title="添加金融账户" onClick={() => showFinanceForm()}>
                      <PlusOutlined />
                  </Button>,
                ]}
                pagination={{
                  pageSize: 20
                }}
                summary={(pageData) => {
                  let totalInAmount = 0;
                  let totalOutAmount = 0;
                  let totalBalance = 0;
          
                  pageData.forEach(({ inAmount, outAmount,balance }) => {
                    totalInAmount += inAmount;
                    totalOutAmount += outAmount;
                    totalBalance += balance;
                  });
                  return (
                    <>
                      <Table.Summary.Row>
                        <Table.Summary.Cell index={1}>                                
                          <div style={{fontSize:15}}>合计</div>
                        </Table.Summary.Cell>
                        <Table.Summary.Cell index={2}>
                          <Statistic value={totalInAmount} prefix="￥" precision={2} valueStyle={{fontSize:15, color: '#cf1322'}}/>
                        </Table.Summary.Cell>
                        <Table.Summary.Cell index={3}>
                          <Statistic value={totalOutAmount} prefix="￥" precision={2} valueStyle={{fontSize:15, color: '#3f8600'}}/>
                        </Table.Summary.Cell>
                        <Table.Summary.Cell index={4}>
                          <Statistic value={totalBalance} prefix="￥" precision={2} valueStyle={{fontSize:15, color: '#1677ff'}}/>
                        </Table.Summary.Cell>
                      </Table.Summary.Row>
                    </>
                  );
                }}
              />
          </TabPane>
          <TabPane tab={<span><PayCircleOutlined />  债权</span>}
              key="claim"
              style={{ paddingLeft: 0 }}>
              <ProTable<PersonAccountItem>
                actionRef={actionRef}
                rowKey="id"
                search={false}
                request={(params) => queryList({ ...params, accountType: 'claim' })}
                columns={claimColumns}
                toolBarRender={() => [
                  <Button type="primary" title="添加债权账户" onClick={() => showClaimForm(undefined)}>
                      <PlusOutlined />
                  </Button>,
                ]}
                pagination={{
                  pageSize: 20
                }}
                summary={(pageData) => {
                  let totalInAmount = 0;
                  let totalOutAmount = 0;
                  let totalBalance = 0;
          
                  pageData.forEach(({ inAmount, outAmount,balance }) => {
                    totalInAmount += inAmount;
                    totalOutAmount += outAmount;
                    totalBalance += balance;
                  });
                  return (
                    <>
                      <Table.Summary.Row>
                        <Table.Summary.Cell index={1}>                                
                          <div style={{fontSize:15}}>合计</div>
                        </Table.Summary.Cell>
                        <Table.Summary.Cell index={2}>
                          <Statistic value={totalInAmount} prefix="￥" precision={2} valueStyle={{fontSize:15, color: '#cf1322'}}/>
                        </Table.Summary.Cell>
                        <Table.Summary.Cell index={3}>
                          <Statistic value={totalOutAmount} prefix="￥" precision={2} valueStyle={{fontSize:15, color: '#3f8600'}}/>
                        </Table.Summary.Cell>
                        <Table.Summary.Cell index={4}>
                          <Statistic value={totalBalance} prefix="￥" precision={2} valueStyle={{fontSize:15, color: '#1677ff'}}/>
                        </Table.Summary.Cell>
                      </Table.Summary.Row>
                    </>
                  );
                }}
              />
          </TabPane>
          <TabPane tab={<span><CreditCardOutlined />  信用</span>}
              key="credit"
              style={{paddingLeft: 0 }}
              >
              <ProTable<PersonAccountItem>
                actionRef={actionRef}
                rowKey="id"
                search={false}
                request={(params) => queryList({ ...params, accountType: 'credit' })}
                columns={creditColumns}
                toolBarRender={() => [
                  <Button type="primary" title="添加信用账户" onClick={() => showCreditForm()}>
                      <PlusOutlined />
                  </Button>,
                ]}
                pagination={{
                  pageSize: 20
                }}
                summary={(pageData) => {
                  let totalInAmount = 0;
                  let totalOutAmount = 0;
                  let totalBalance = 0;
                  let totalBillAmount = 0;
          
                  pageData.forEach(({ inAmount, outAmount,balance,billAmount }) => {
                    totalInAmount += inAmount;
                    totalOutAmount += outAmount;
                    totalBalance += balance;
                    totalBillAmount += billAmount;
                  });
                  return (
                    <>
                      <Table.Summary.Row>
                        <Table.Summary.Cell index={1}>                                
                          <div style={{fontSize:15}}>合计</div>
                        </Table.Summary.Cell>
                        <Table.Summary.Cell index={2}>
                          <Statistic value={totalInAmount} prefix="￥" precision={2} valueStyle={{fontSize:15, color: '#1677ff'}}/>
                        </Table.Summary.Cell>
                        <Table.Summary.Cell index={3}>
                          <Statistic value={totalOutAmount} prefix="￥" precision={2} valueStyle={{fontSize:15, color: '#3f8600'}}/>
                        </Table.Summary.Cell>
                        <Table.Summary.Cell index={4}>
                          <Statistic value={totalBalance} prefix="￥" precision={2} valueStyle={{fontSize:15, color: '#FF7316'}}/>
                        </Table.Summary.Cell>
                        <Table.Summary.Cell index={5}>
                          <Statistic value={totalBillAmount} prefix="￥" precision={2} valueStyle={{fontSize:15, color: '#cf1322'}}/>
                        </Table.Summary.Cell>
                      </Table.Summary.Row>
                    </>
                  );
                }}
              />
          </TabPane>
          <TabPane tab={<span><DollarOutlined />  贷款</span>}
              key="loan"
              style={{paddingLeft: 0 }}
              >
              <ProTable<PersonAccountItem>
                actionRef={actionRef}
                rowKey="id"
                search={false}
                request={(params) => queryList({ ...params, accountType: 'loan' })}
                columns={loanColumns}
                toolBarRender={() => [
                  <Button type="primary" title="添加贷款账户" onClick={() => showLoanForm()}>
                      <PlusOutlined />
                  </Button>,
                ]}
                pagination={{
                  pageSize: 20
                }}
                summary={(pageData) => {
                  let totalInAmount = 0;
                  let totalOutAmount = 0;
                  let totalBalance = 0;
                  let totalBillAmount = 0;
          
                  pageData.forEach(({ inAmount, outAmount,balance, billAmount}) => {
                    totalInAmount += inAmount;
                    totalOutAmount += outAmount;
                    totalBalance += balance;
                    totalBillAmount += billAmount;
                  });
                  return (
                    <>
                      <Table.Summary.Row>
                        <Table.Summary.Cell index={1}>                                
                          <div style={{fontSize:15}}>合计</div>
                        </Table.Summary.Cell>
                        <Table.Summary.Cell index={2}>
                          <Statistic value={totalInAmount} prefix="￥" precision={2} valueStyle={{fontSize:15, color: '#1677ff'}}/>
                        </Table.Summary.Cell>
                        <Table.Summary.Cell index={3}>
                          <Statistic value={totalOutAmount} prefix="￥" precision={2} valueStyle={{fontSize:15, color: '#3f8600'}}/>
                        </Table.Summary.Cell>
                        <Table.Summary.Cell index={4}>
                          <Statistic value={totalBalance} prefix="￥" precision={2} valueStyle={{fontSize:15, color: '#FF7316'}}/>
                        </Table.Summary.Cell>
                        <Table.Summary.Cell index={5}>
                          <Statistic value={totalBillAmount} prefix="￥" precision={2} valueStyle={{fontSize:15, color: '#cf1322'}}/>
                        </Table.Summary.Cell>
                      </Table.Summary.Row>
                    </>
                  );
                }}
              />
          </TabPane>
          <TabPane tab={<span><UserDeleteOutlined />  债务</span>}
              key="debt"
              style={{paddingLeft: 0 }}
              >
              <ProTable<PersonAccountItem>
                actionRef={actionRef}
                rowKey="id"
                search={false}
                request={(params) => queryList({ ...params, accountType: 'debt' })}
                columns={debtColumns}
                toolBarRender={() => [
                  <Button type="primary" title="添加债务账户" onClick={() => showDebtForm()}>
                      <PlusOutlined />
                  </Button>,
                ]}
                pagination={{
                  pageSize: 20
                }}
                summary={(pageData) => {
                  let totalInAmount = 0;
                  let totalOutAmount = 0;
                  let totalBalance = 0;
          
                  pageData.forEach(({ inAmount, outAmount,balance, billAmount}) => {
                    totalInAmount += inAmount;
                    totalOutAmount += outAmount;
                    totalBalance += balance;
                  });
                  return (
                    <>
                      <Table.Summary.Row>
                        <Table.Summary.Cell index={1}>                                
                          <div style={{fontSize:15}}>合计</div>
                        </Table.Summary.Cell>
                        <Table.Summary.Cell index={2}>
                          <Statistic value={totalInAmount} prefix="￥" precision={2} valueStyle={{fontSize:15, color: '#1677ff'}}/>
                        </Table.Summary.Cell>
                        <Table.Summary.Cell index={3}>
                          <Statistic value={totalOutAmount} prefix="￥" precision={2} valueStyle={{fontSize:15, color: '#3f8600'}}/>
                        </Table.Summary.Cell>
                        <Table.Summary.Cell index={4}>
                          <Statistic value={totalBalance} prefix="￥" precision={2} valueStyle={{fontSize:15, color: '#cf1322'}}/>
                        </Table.Summary.Cell>
                      </Table.Summary.Row>
                    </>
                  );
                }}
              />
          </TabPane>
      </Tabs>
      <DetailList
          accountId={accountId as number}
          visible={detailVisible}
          onCancel={() => setDetailVisible(false)}
      />
      <FinanceForm
          personAccountItem={personAccountItem}
          visible={financeVisible}
          onCancel={() => setFinanceVisible(false)}
          onSubmit={handleSubmit}
      />
      <FinanceOpForm
          accountOpItem={accountOpItem}
          visible={financeOpVisible}
          onCancel={() => setFinanceOpVisible(false)}
          onSubmit={handleOpSubmit}
      />
      <ClaimForm
          personAccountItem={personAccountItem}
          visible={claimVisible}
          onCancel={() => setClaimVisible(false)}
          onSubmit={handleSubmit}
      />
      <ClaimOpForm
          accountOpItem={accountOpItem}
          visible={claimOpVisible}
          onCancel={() => setClaimOpVisible(false)}
          onSubmit={handleOpSubmit}
      />
      <CreditForm
          personAccountItem={personAccountItem}
          visible={creditVisible}
          onCancel={() => setCreditVisible(false)}
          onSubmit={handleSubmit}
      />
        <CreditOpForm
          accountOpItem={accountOpItem}
          visible={creditOpVisible}
          onCancel={() => setCreditOpVisible(false)}
          onSubmit={handleOpSubmit}
      />
      <LoanForm
          personAccountItem={personAccountItem}
          visible={loanVisible}
          onCancel={() => setLoanVisible(false)}
          onSubmit={handleSubmit}
      />
      <LoanOpForm
          accountOpItem={accountOpItem}
          visible={loanOpVisible}
          onCancel={() => setLoanOpVisible(false)}
          onSubmit={handleOpSubmit}
      />
      <DebtFrom
          personAccountItem={personAccountItem}
          visible={debtVisible}
          onCancel={() => setDebtVisible(false)}
          onSubmit={handleSubmit}
      />
      <LoanOpForm
        accountOpItem={accountOpItem}
        visible={debtOpVisible}
        onCancel={() => setDebtOpVisible(false)}
        onSubmit={handleOpSubmit}
      />
    </PageContainer>
  );
};